<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
	<title>活动排行</title>
	<link rel="stylesheet" type="text/css" media="screen" href="{$staticHost}/static/css/base.css" />
	<link rel="stylesheet" type="text/css" media="screen" href="{$staticHost}/static/css/mod.css" />
	<link rel="stylesheet" type="text/css" media="screen" href="{$staticHost}/static/css/list.css" />
	<link rel="stylesheet" type="text/css" media="screen" href="{$staticHost}/static/css/page.css" />
	<script src="{$staticHost}/static/js/jquery-1.8.3.min.js"></script>
	<script src="{$staticHost}/static/js/js.js"></script>
	<script src="{$staticHost}/static/js/mod.js"></script>

</head>
<style type="text/css">
	.dropload-up,.dropload-down{
		position: relative;
		height: 0;
		overflow: hidden;
		font-size: 12px;
		/* 开启硬件加速 */
		-webkit-transform:translateZ(0);
		transform:translateZ(0);
	}
	.dropload-down{
		height: 50px;
	}
	.dropload-refresh,.dropload-update,.dropload-load,.dropload-noData{
		height: 50px;
		line-height: 50px;
		text-align: center;
	}
	.dropload-load .loading{
		display: inline-block;
		height: 15px;
		width: 15px;
		border-radius: 100%;
		margin: 6px;
		border: 2px solid #666;
		border-bottom-color: transparent;
		vertical-align: middle;
		-webkit-animation: rotate 0.75s linear infinite;
		animation: rotate 0.75s linear infinite;
	}
	@-webkit-keyframes rotate {
		0% {
			-webkit-transform: rotate(0deg);
		}
		50% {
			-webkit-transform: rotate(180deg);
		}
		100% {
			-webkit-transform: rotate(360deg);
		}
	}
	@keyframes rotate {
		0% {
			transform: rotate(0deg);
		}
		50% {
			transform: rotate(180deg);
		}
		100% {
			transform: rotate(360deg);
		}
	}
	.zs { position: fixed; background: #fff; z-index: 20; width: 100%;top: 0 }
	#con-box { top: 37px }
	/*#jz*/ {padding-top: 105px}
</style>
<body>
<section class="official rank-cut">
	<h6 class="zs">
		<a class="line" href="javascript:void(0)">群组</a>
		<a href="{$staticHost}/show/rank?aid={$aid}&gid={$gid}&type=2">群成员</a>
	</h6>

	<div id="con-box" class="zs"></div>
	<div id="jz" class="rank-cut">
		<ul id="waplist" class="list-01">
		</ul>
	</div>

</section>
<script id="curGroup-tp" type="text/html">
	<%if(curGroup.gid!= undefined){%>
	<% if(type==3){%>
	<div class="rank-mileage">
		<ul class="list-01">
			<li>
						<span>
							<% if (curGroup.header.length>0){%>
							<img src="<%=curGroup.header%>" />
							<%}%>
							<% if (curGroup.header.length==0){%>
								<img src="{$staticHost}/static/images/bg/group_image_nor-min.png">　
							<%}%>
							<i class="ico-crown-2"></i>
						</span>
				<span style="color:#3BB7D9;"><%=curGroup.name%></span>

				<span><b><%=curGroup.mileage %>km</b></span>
				<em class="sole" ><%=curGroup.rank%></em>
			</li>
		</ul>
	</div>
	<%}%>
	<!-- 目标 -->
	<%if(type==4){%>
	<ul class="list-01">
		<li>
					<span>
						<% if (curGroup.header.length>0){%>
						<img src="<%=curGroup.header%>" />
						<%}%>
						<% if (curGroup.header.length==0){%>
							<img src="{$staticHost}/static/images/bg/group_image_nor-min.png">　
						<%}%>
					</span>
			<span style="color:#3BB7D9";><%=curGroup.name%></span>
			<span><b><%=curGroup.mileage %>km</b></span>
		</li>
	</ul>
	<%}%>
	<!-- 打卡 -->
	<%}%>
	<!-- 当前 -->
</script>
<script id="curGroupList" type="text/html">

	<% if(type==3){%>
	<%for(var i=0;i<list.length; i++) {%>
	<li>
					<span>
						<% if (list[i].header.length>0){%>
						<img src="<%=list[i].header%>" />
						<%}%>
						<% if (list[i].header.length==0){%>
							<img src="{$staticHost}/static/images/bg/group_image_nor-min.png">
						<%}%>
						<% if (list[i].rank==1){%>
						<i class="ico-crown-2"></i>
						<%}%>
						<% if (list[i].rank==2){%>
						<i class="ico-crowny-2"></i>
						<%}%>
						<% if (list[i].rank==3){%>
						<i class="ico-crownt-2"></i>
						<%}%>
					</span>
		<span><%=list[i].name%></span>
		<span><b><%=list[i].mileage %>km</b></span>
		<em><%=list[i].rank%></em>
	</li>
	<%}%>
	<%}%>
	<!-- 目标 -->

	<% if(type==4){%>
	<%for(var i=0;i<list.length; i++) {%>
	<li>
					<span>
						<% if (list[i].header.length>0){%>
						<img src="<%=list[i].header%>" />
						<%}%>
						<% if (list[i].header.length==0){%>
							<img src="{$staticHost}/static/images/bg/group_image_nor-min.png">　
						<%}%>
						
					</span>
		<span><%=list[i].name%></span>
		<span><b><%=list[i].mileage%>km</b></span>
	</li>
	<%}%>
	<%}%>
	<!-- 打卡 -->

</script>
</body>
<script>
	var gid = "{$gid}";
	var aid = "{$aid}";
	var id =0;
	var time = new Date(new Date().getTime());
	time = (time.getFullYear()+"-"+(time.getMonth()+1)+"-"+time.getDate()+" "+time.getHours()+":"+time.getMinutes());

	var downTime = new Date(new Date().getTime());
	downTime = (downTime.getFullYear()+"-"+(downTime.getMonth()+1)+"-"+downTime.getDate()+" "+downTime.getHours()+":"+downTime.getMinutes());

	$(function(){
		Load()
		$.getJSON('{$staticHost}/groupWeb/groupRank',{aid:aid,gid:gid,id:0 }, function(data, error) {
			console.log(data);
			if(data.type==3){
				$("#jz").addClass("rank-mileage")
			}
			if(typeof data.list == 'undefined') {
				return;
			}
			if(data.curGroup.gid != undefined){
				$("#jz").css("padding-top","105px")
			}else{
				$("#jz").css("padding-top","45px")
			}

			var html = template('curGroup-tp', data);
			document.getElementById('con-box').innerHTML = html;
			var sole = $(".sole").html();
			soleAll()
		});
	});
	/***加载数据***/

	var counter = 0;
	var num = 0;
	var pageStart = 0,pageEnd = 0;
	var generatedCount = 0;
	var lis = $("#group li")
	function Load(){
		$('#jz').dropload({
			scrollArea : window,
			loadDownFn : function(me){
				$.ajax({
					type: 'GET',
					url: '{$staticHost}/groupWeb/groupRank',
					dataType: 'json',
					data:{aid:aid,gid:gid,id:id},
					success: function(data){
						console.log(data);
						var result = '';
						counter++;
						pageEnd = num * counter;
						pageStart = pageEnd - num;
						if(typeof data.list == 'undefined') {
							$(".pullUpLabel").html("已加载完毕");
							return;
						}

						if(data.list.length> 0 ) {
							id = data.list[data.list.length-1].gid;
							var html = template('curGroupList', data);
							$('#waplist').append(html);

						}else{
							$('#pullUpLabel').html("已加载完毕");
							me.noData();me.lock();
						}
						// 为了测试，延迟1秒加载
						console.log('2121')
						me.noData();
						me.resetload();

					},
					error: function(xhr, type){
						alert('Ajax error!');
						// 即使加载出错，也得重置
						me.resetload();
					}
				});
			}
		});
	}

</script>
<script src="{$staticHost}/static/js/dropload.js"></script>
{template 'show/web-footer'}
